﻿<%@ Page Title="主页" Language="C#" AutoEventWireup="true" CodeBehind="ProjectActivityGraph.aspx.cs"
    Inherits="WebApplication.ProjectActivityGraph" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>顺序图</title>
    <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
        .Map td
        {
            width: 40px;
        }
        .Map td, .Map th
        {
            border-right: 1px solid gray;
        }
        .AreaTitle
        {
            border-bottom: 1px solid black;
        }
        .Map
        {
            border: 1px solid black;
            width: 100%;
            border-collapse: collapse;
        }
        .Map .Node
        {
            border: 1px solid black;
            border-collapse: collapse;
            margin: 10px 10px;
            padding: 10px;
            cursor: pointer;
        }
        .Map .NameTd
        {
            width: 30px;
            text-align: center;
        }
        .Map .NameTd .Name
        {
            width: 20px;
            padding: 5px;
        }
        .Node
        {
            color: White;
            border-radius: 5px; /*box-shadow: 5px 5px 5px #888888;*/
            opacity: 0.8;
        }
        .LineH
        {
            height: 2px;
            line-height: 2px;
            background: black;
            position: absolute;
            z-index: 999;
        }
        .LineV
        {
            width: 2px;
            background: black;
            position: absolute;
            z-index: 999;
        }
        .LineLV
        {
            width: 18px;
            border-top: 2px solid black;
            border-bottom: 2px solid black;
            border-left: 2px solid black;
            position: absolute;
            z-index: 999;
        }
        .LineRV
        {
            width: 18px;
            border-top: 2px solid black;
            border-bottom: 2px solid black;
            border-right: 2px solid black;
            position: absolute;
            z-index: 999;
        }
        .Arrow
        {
            position: absolute;
            z-index: 1000;
        }
    </style>
    <script type="text/javascript">
    var HEIGHT_LINELV=20;
    var OFFSET=5;
    var LINE_WIDTH=2;
    var ARROW_WIDTH=16;
    var ARROW_HEIGHT=16;
    var nodes=<%=MapData %>;
    </script>
    <script type="text/javascript">
        var container = null;
        $(function () {
            container = $("body"); drawLine();
        });

        function drawLine() {
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].point = "";
            }
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].NextNodeID == -1) {
                    continue;
                }
                var na = nodes[i];
                for (var j = 0; j < na.NextNodeIDList.length; j++) {
                    var nb = getNode(na.NextNodeIDList[j]);
                    if (!nb) { continue; }
                    if (na.RowIndex == nb.RowIndex && na.ColumnIndex < nb.ColumnIndex) { drawLineH(na, nb); } //平行
                    else if (na.RowIndex < nb.RowIndex && na.ColumnIndex == nb.ColumnIndex) { drawLineV(na, nb); } //水平
                    else if (na.RowIndex < nb.RowIndex && na.ColumnIndex > nb.ColumnIndex) { drawLineB(na, nb); } //左下
                    else { drawLineF(na, nb); } //右下
                }
            }
        }

        function drawMuilNodes(node) {
            var children = new Array();
            for (var i = 0; i < node.NextNodeIDList.length; i++) {
                children.push(getNode(node.NextNodeIDList[i]));
            }
        }

        function getNode(id) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].ID == id) { return nodes[i]; }
            }
            return null;
        }

        function drawLineH(na, nb) {//水平线
            var a = $("#node_" + na.ID);
            var b = $("#node_" + nb.ID);
            var width = b.offset().left - a.offset().left - a.outerWidth();
            var left = a.offset().left + a.outerWidth();
            var top = (a.offset().top + a.outerHeight() / 2);
            if (na.point.indexOf("r") > -1) {
                top += 18;
            }
            var line = container.append("<div class='LineH' style='width:" + width + "px;left:" + left + "px;top:" + top + "px'></div>");
            container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + (left + width - ARROW_WIDTH + 1) + "px;top:" + (top - (ARROW_HEIGHT - LINE_WIDTH) / 2) + "px' src='../images/right.gif'></img>");
            a.point += "r";
            b.point += "l";
        }
        var existsLines = new Array();
        function drawLineV(na, nb) {//垂直
            var isHindeer = false;
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].ColumnIndex == na.ColumnIndex && nodes[i].RowIndex > na.RowIndex && nodes[i].RowIndex < nb.RowIndex) {
                    isHindeer = true; break;
                }
            }

            var a = $("#node_" + na.ID);
            var b = $("#node_" + nb.ID);
            var left, top, height;

            if (isHindeer) {//有阻挡
                left = a.offset().left - HEIGHT_LINELV;
                top = a.offset().top + a.outerHeight() / 2;
                height = b.offset().top - top + b.outerHeight() / 2;
                if (isUsed(left, top, height)) {//已占用
                    left = a.offset().left + a.outerWidth();
                    existsLines.push({ Left: left, Top: top, Height: height });
                    var line = container.append("<div class='LineRV' style='height:" + height + "px;left:" + left + "px;top:" + top + "px'></div>");
                    container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + (left) + "px;top:" + (top + height - ARROW_HEIGHT / 2 + 3) + "px' src='../images/left.gif'></img>");
                    nb.point += "r";
                } else {
                    existsLines.push({ Left: left, Top: top, Height: height });
                    var line = container.append("<div class='LineLV' style='height:" + height + "px;left:" + left + "px;top:" + top + "px'></div>");
                    container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + (left + HEIGHT_LINELV - ARROW_WIDTH) + "px;top:" + (top + height - ARROW_HEIGHT / 2 + 3) + "px' src='../images/right.gif'></img>");
                    nb.point += "l";
                }
            } else {
                height = (b.offset().top - a.offset().top - a.outerHeight());
                left = (a.offset().left + a.outerWidth() / 2);
                top = (a.offset().top + a.outerHeight());
                var line = container.append("<div class='LineV' style='height:" + height + "px;left:" + left + "px;top:" + top + "px'></div>");
                container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + (left - (ARROW_WIDTH - LINE_WIDTH) / 2) + "px;top:" + (top + height - ARROW_HEIGHT) + "px' src='../images/down.gif'></img>");
                nb.point += "t";
                na.point += "b";
            }
        }

        function isUsed(left, top, height) {
            for (var i = 0; i < existsLines.length; i++) {
                if (existsLines[i].Left == left) {
                    if (top <= existsLines[i].Top + existsLines[i].Height) { return true; }
                }
            }
            return false;
        }

        function drawLineB(na, nb) {//下左
            var a = $("#node_" + na.ID);
            var b = $("#node_" + nb.ID);
            var width = (a.offset().left - b.offset().left - b.outerWidth() + a.outerWidth() / 2 + LINE_WIDTH);
            var left = (b.offset().left + b.outerWidth());
            var top = (b.offset().top + b.outerHeight() / 2);
            var line = container.append("<div class='LineH' style='width:" + width + "px;left:" + left + "px;top:" + top + "px'></div>");
            container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + left + "px;top:" + (top - ARROW_HEIGHT / 2 + 1) + "px' src='../images/left.gif'></img>");
            width = (b.offset().top - a.offset().top - a.outerHeight() + b.outerHeight() / 2);
            left = (a.offset().left + a.outerWidth() / 2);
            top = (a.offset().top + a.outerHeight());
            var line = container.append("<div class='LineV' style='height:" + width + "px;left:" + left + "px;top:" + top + "px'></div>");
            nb.point += "r";
        }

        function drawLineF(na, nb) {//下右
            var a = $("#node_" + na.ID);
            var b = $("#node_" + nb.ID);
            var offset = 0;
            if (nb.point && nb.point.indexOf("l") > -1) {
                offset = OFFSET;
            }
            var width = (b.offset().left - a.offset().left - a.outerWidth() + a.outerWidth() / 2 + LINE_WIDTH);
            var left = (a.offset().left + a.outerWidth() / 2);
            var top = (b.offset().top + b.outerHeight() / 2 + offset);
            var line = container.append("<div class='LineH' style='width:" + width + "px;left:" + left + "px;top:" + top + "px'></div>");
            container.append("<img class='Arrow' style='width:" + ARROW_WIDTH + "px;height:" + ARROW_HEIGHT + ";left:" + (left + width - ARROW_WIDTH) + "px;top:" + (top - ARROW_HEIGHT / 2 + 1) + "px' src='../images/right.gif'></img>");
            var line = container.append("<div class='LineV' style='height:" + (b.offset().top + b.outerHeight() / 2 - a.offset().top - a.outerHeight() + offset) + "px;left:" + (a.offset().left + a.outerWidth() / 2) + "px;top:" + (a.offset().top + a.outerHeight()) + "px'></div>");
            nb.point += "l";
        }
    </script>
    <script type="text/javascript">
        function openPointDetails(id) {
            mini.open({
                url: "/Business/NodeDetails.aspx?id=" + id,
                title: "节点明细", width: 800, height: 640,
                ondestroy: function (action) {
                    if (action == "ok") {
                        mini.get("rootPanel").loading();
                        var iframe = this.getIFrameEl();
                        var datas = iframe.contentWindow.GetData();
                        var accounts = new Array();
                        for (var i = 0; i < datas.length; i++) {
                            accounts.push(datas[i].Account);
                        }
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        $(function () {
            var source = $(".Map").children().eq(0).children().eq(0);
            $("#TableHeader").html("<table class='Map'>" + source.html() + "</table>");
            var newColumn = $("#TableHeader th");
            for (var i = 0; i < newColumn.length; i++) {
                newColumn.eq(i).width(source.children().eq(i).width());
            }
        });
        $(window).scroll(function (e) {
            //$("#TopHeader").show();
            $("#TopHeader").offset({ top: $(window).scrollTop(), left: $("#TopHeader").offset().left })
        });
    </script>
</head>
<body>
    <div id="TopHeader" style="width: 100%; background: white; position: absolute;
        z-index: 99999">
        <script type="text/javascript">            writeStatusHtml();</script>
        <div id="TableHeader">
        </div>
    </div>
    <script type="text/javascript">        writeStatusHtml();</script>
    <asp:Label runat="server" ID="label"></asp:Label>
    <div id="MapContainer" runat="server" clientidmode="Static">
    </div>
</body>
<script type="text/javascript">
    mini.parse();
</script>
</html>
